<template>
  <div class="tongji-box">
    <div class="tongji-card-box">
      <div class="flex-box">
        <div class="tongji-card top-card">
          <div>
            <div>今日预估收入(元)</div>
            <div style="color: #FE5B40;">{{ dataForm.nowDay || 0 }}</div>
          </div>
          <div>
            <span>昨日收入</span>
            <span>{{ dataForm.lastMonth || 0 }}</span>
          </div>
        </div>
        <div class="tongji-card top-card">
          <div>
            <div>今日提交订单</div>
            <div>{{ dataForm.nowDayNewOrder || 0 }}</div>
          </div>
          <div>
            <span>昨日提交</span>
            <span>{{ dataForm.lastDayNewOrder || 0 }}</span>
          </div>
        </div>
      </div>
      <div class="w100-card">
        <div>
          <div>今日激活</div>
          <div class="num-box" style="color: #FE5B40;">{{ dataForm.nowDayActive || 0 }}</div>
        </div>
        <div>
          <div>月度激活</div>
          <div class="num-box">{{ dataForm.nowMonthActive || 0 }}</div>
        </div>
      </div>
      <div class="w100-card">
        <div>
          <div>月度收益</div>
          <div class="num-box" style="color: #FE5B40;">{{ dataForm.nowMoneh || 0 }}</div>
        </div>
        <div>
          <div>上月收益</div>
          <div class="num-box">{{ dataForm.lastMonth || 0 }}</div>
        </div>
      </div>
      <div class="w100-card-pie">
        <div class="pie-box">
          <div class="bingtu-box" id="bingtu"></div>
          <div class="bingtu-info">
            <div>
              <div>累计发货</div>
              <div>{{ dataForm.allLogist || 0 }}</div>
            </div>
            <div>
              <div>累计激活</div>
              <div>{{ dataForm.allActive || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="pie-info">
          <div>
            <span>年度收益</span>
            <span>{{ dataForm.nowYear || 0 }}</span>
          </div>
          <div>
            <span>累计订单</span>
            <span>{{ dataForm.allNewOrder || 0 }}</span>
          </div>
        </div>
      </div>

      <div class="line-box">
        <div id="lineContentBox"></div>
        <div class="tabs-box">
          <div>
            <div :class="{'active':activeTabs == 0}" @click="activeHandle(0)">收益</div>
            <div :class="{'active':activeTabs == 1}" @click="activeHandle(1)">订单</div>
            <div :class="{'active':activeTabs == 2}" @click="activeHandle(2)">激活数</div>
          </div>
        </div>
      </div>

      <div class="bar-box">
        <div id="barContentBox"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import * as echarts from 'echarts';
import api from './api'

const store = useStore()

const dataForm = ref({})
const activeTabs = ref(0)
let myLineChart = null
let myBarChart = null

onMounted(() => {
  store.commit("setNavBar", { show: false })
  getDataForm()
  activeHandle()
  getDailiShopData()
})

const activeHandle = (active = 0) => {
  activeTabs.value = active
  tabChange(active)
}

const tabChange = (active = 0, latestDay = 7) => {
  const apiList = ['staticsIncome', 'staticsOrderCreate', 'staticsOrderActive']
  const _yName = ['money', 'num', 'num']
  api[apiList[active]]({ latestDay }).then(res => {
    if (res.code == '200') {
      lineTuInit('lineContentBox', getLineData(res.data?.list || [], 'day', _yName[active]))
    } else {
      showToast(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

const getDailiShopData = (latestDay = 7) => {
  api.staticsConsumerAdd({ latestDay }).then(res => {
    if (res.code == '200') {
      barTuInit('barContentBox', getLineData(res.data?.list || [], 'day', 'num'))
    } else {
      showToast(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

const getLineData = (_list = [], _xName = '', _yName = '') => {
  const obj = {
    xData: [],
    yData: [],
  }
  _list?.map(item => {
    obj.xData.push(item[_xName])
    obj.yData.push(Number(item[_yName]))
  })
  return obj
}

const getDataForm = () => {
  api.staticsIndex().then(res => {
    if (res.code == '200') {
      dataForm.value = res.data
      bingtuInit()
    } else {
      showToast(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

const bingtuInit = () => {
  const { allLogist, allActive } = dataForm.value
  const myChart = echarts.init(document.getElementById('bingtu'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['80%', '100%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderWidth: 1
        },
        labelLine: {
          show: false
        },
        hoverAnimation: false,
        color: ['#eeeeee', '#255FFF'],
        data: [
          { value: allLogist - allActive, name: '未激活' },
          { value: allActive, name: '累计激活' },
        ],
        label: {
          normal: {
            show: true,
            position: 'center',
            formatter: `${((allActive / (allLogist || 1)).toFixed(2)) * 100}%激活率`,
          },
          emphasis: {
            show: true,
          }
        }
      }
    ]
  }
  option && myChart.setOption(option);
}

const lineTuInit = (_domId = 'lineContentBox', _data = {}) => {
  myLineChart && myLineChart.clear()
  const { xData, yData } = _data
  myLineChart = echarts.init(document.getElementById(_domId))
  const option = {
    title: {
      text: '近期数据',
      textStyle: {
        fontSize: '16px'
      },
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: "40px",
      left: "30px",
      right: "30px",
      bottom: "25px"
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: yData,
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: '#295FFF'
            }
          ])
        },
      }
    ]
  }
  option && myLineChart.setOption(option, true)
}

const barTuInit = (_domId = 'barContentBox', _data = {}) => {
  myBarChart && myBarChart.clear()
  const { xData, yData } = _data
  myBarChart = echarts.init(document.getElementById(_domId))
  const option = {
    title: {
      text: '代理发展',
      textStyle: {
        fontSize: '16px'
      },
    },
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: 'black',
        fontSize: 10
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    minInterval: 1,
    grid: {
      top: "50px",
      left: "30px",
      right: "30px",
      bottom: "25px"
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: yData,
        type: 'bar',
      }
    ]
  }
  option && myBarChart.setOption(option, true)
}

</script>

<style lang="scss" scoped>
.tongji-box {
  height: 100%;
  padding-top: 0 !important;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  box-sizing: border-box;
  .tongji-card-box {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 15px;
    .flex-box {
      display: flex;
    }
    .tongji-card {
      width: calc(50% - 5px);
      background: rgba($color: #488bfe, $alpha: 0.2);
      box-sizing: border-box;
      padding: 20px;
      border-radius: 7px;
      &:not(:first-of-type) {
        margin-left: 10px;
      }
    }
    .top-card {
      > div:first-of-type {
        font-size: 12px;
        > div:last-of-type {
          font-size: 18px;
          margin-top: 10px;
          font-weight: bold;
        }
      }
      > div:last-of-type {
        font-size: 12px;
        margin-top: 10px;
        > span:last-of-type {
          margin-left: 10px;
        }
      }
    }
    .w100-card {
      display: flex;
      background: rgba($color: #488bfe, $alpha: 0.2);
      margin-top: 10px;
      padding: 20px;
      border-radius: 7px;
      font-size: 12px;
      > div {
        width: calc(50% - 5px);
        &:last-of-type {
          margin-left: 10px;
        }
        > .num-box {
          font-size: 18px;
          margin-top: 10px;
          font-weight: bold;
        }
      }
    }
    .w100-card-pie {
      background: rgba($color: #488bfe, $alpha: 0.2);
      margin-top: 10px;
      border-radius: 7px;
      font-size: 12px;
      overflow: hidden;
      .pie-box {
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        > div {
          width: calc(50% - 5px);
          &:last-of-type {
            margin-left: 10px;
          }
          > .num-box {
            font-size: 18px;
            margin-top: 10px;
            font-weight: bold;
          }
        }
      }
      .pie-info {
        display: flex;
        background: #ffffff;
        box-sizing: border-box;
        padding: 20px;
        > div {
          width: calc(50% - 5px);
          color: #707070;
          display: flex;
          align-items: center;
          &::before {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #488bfe;
            border-radius: 50%;
          }
          &:last-of-type {
            margin-left: 10px;
          }
          > span:first-of-type {
            margin-left: 3px;
          }
          > span:last-of-type {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.bingtu-box {
  width: 100%;
}
.bingtu-info {
  > div {
    font-size: 12px;
    &:not(:first-of-type) {
      margin-top: 15px;
    }
    > div:last-of-type {
      font-size: 18px;
      margin-top: 10px;
      font-weight: bold;
    }
  }
}
.line-box {
  background: #ffffff;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 10px;
  border-radius: 7px;
  #lineContentBox {
    height: 200px;
  }
  .tabs-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      background: #f3f3f3;
      > div {
        color: #707070;
        box-sizing: border-box;
        padding: 3px 15px;
        font-size: 12px;
        border-radius: 20px;
        transition: all 0.2s;
      }
      > .active {
        background: #295fff;
        color: #ffffff;
      }
    }
  }
}
.bar-box {
  background: #ffffff;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 10px;
  border-radius: 7px;
  #barContentBox {
    height: 200px;
  }
}
</style>